<template>
    <div class="submenu">
        <template v-for="(item, index) in menuList" :key="index">
            <nuxt-link
                v-if="item.isEnable"
                class="menu-item"
                :external="validateUtil.isExternal(item.link?.path)"
                :target="validateUtil.isExternal(item.link?.path) ? '_blank' : '_self'"
                :to="{
                    path: item.link?.path,
                    query: item.link?.query
                }"
                @mouseenter="handleMouseover(index)"
                @mouseleave="handleMouseleave(index)"
            >
                <img
                    v-show="!item.hover && item.unselected"
                    :src="appStore.toAbsoluteUrl(item.unselected)"
                    class="w-[22px] h-[22px]"
                    :alt="item.name"
                />
                <img
                    v-show="item.hover"
                    :src="appStore.toAbsoluteUrl(item.selected || item.unselected)"
                    class="w-[22px] h-[22px]"
                    :alt="item.name"
                />
                <span class="text-xs">{{ item.name }}</span>
            </nuxt-link>
        </template>

    </div>
</template>

<script setup lang="ts">
import useAppStore from '~/stores/app'
import validateUtil from '~/utils/validate'

const appStore = useAppStore()

// 装修数据
const diyData = await appStore.getDiy(200)
const menuList = ref(diyData.asides.menu)

/**
 * 处理鼠标经过
 *
 * @param {number} index
 * @author zero
 */
const handleMouseover = (index: number) => {
    menuList.value[index].hover = true
}

/**
 * 处理鼠标离开
 *
 * @param {number} index
 * @author zero
 */
const handleMouseleave = (index: number) => {
    menuList.value[index].hover = false
}
</script>

<style scoped lang="scss">
.submenu {
    .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        height: 66px;
        padding: 10px 15px;
        color: var(--el-text-color-regular);
        &:hover {
            color: var(--el-color-primary) !important;
            cursor: pointer;
        }
    }
}
</style>
